<template>
	<div>
		<!-- 统一的公式展示区块 -->
		<div class="panel rounded-lg p-5 mb-6">
			<div class="flex flex-col lg:flex-row gap-20 items-stretch">
				<!-- 赌场收入公式 -->
				<div class="flex-1 flex flex-col justify-between">
					<div>
						<div class="text-lg font-bold">{{ $t('agent.formula.casino.title') }}</div>
						<div class="mt-2 mb-5">{{ $t('agent.formula.casino.desc') }}</div>
					</div>
					<div class="bg-bg-2 rounded-lg p-5 text-t-2 flex items-center justify-center">
						{{ $t('agent.formula.casino.rule') }}
					</div>
				</div>
				<!-- 体育收入公式 -->
				<div class="flex-1 flex flex-col justify-between">
					<div>
						<div class="text-lg font-bold">{{ $t('agent.formula.sports.title') }}</div>
						<div class="mt-2 mb-5">{{ $t('agent.formula.sports.desc') }}</div>
					</div>
					<div class="bg-bg-2 rounded-lg p-5 text-t-2 flex items-center justify-center">
						{{ $t('agent.formula.sports.rule') }}
					</div>
				</div>
				<!-- 引荐收入公式 -->
				<div class="flex-1 flex flex-col justify-between">
					<div>
						<div class="text-lg font-bold">{{ $t('agent.formula.earnings.title') }}</div>
						<div class="mt-2 mb-5">{{ $t('agent.formula.earnings.desc') }}</div>
					</div>

					<div class="bg-bg-2 rounded-lg p-5 text-t-2 flex items-center justify-center">
						{{ $t('agent.formula.earnings.rule') }}
					</div>
				</div>
			</div>
		</div>

		<!-- 佣金收入计算器 -->
		<div class="panel p-5">
			<!-- 佣金收入计算器标题 -->
			<div class="text-lg font-bold mb-4">{{ $t('agent.calculator.title') }}</div>

			<!-- 游戏类型选择 -->
			<div class="flex flex-col lg:flex-row gap-5">
				<div>
					<!-- 添加游戏类型文字说明 -->
					<div class="text-t-2 mt-2">{{ $t('agent.calculator.gameType') }}</div>
					<base-popselect
						:model-value="gameType"
						size="small"
						:options="gameTypeList"
						placement="bottom-start"
						@update:model-value="onTypeChange"
						selected-class="w-[284px] h-[34px] px-[8px] rounded-sm bg-bg-2 flex justify-between items-center text-t-2"
						class="bg-bg-2"
						itemClass="select-item bg-bg-2"></base-popselect>
				</div>
			</div>

			<!-- 分隔线 -->
			<div class="border-t border-dashed border-border-2 my-5"></div>

			<div class="flex flex-col gap-5">
				<!-- 第一行：标签 -->
				<!-- <div class="grid grid-cols-1 md:grid-cols-4 gap-5 md:gap-2 items-center"> -->
				<div class="flex flex-col md:flex-row">
					<!-- 投注金额标签 -->
					<div class="flex-1">
						<div class="label-wrap">
							<label class="text-t-2 text-center">{{ $t('agent.calculator.betAmount') }}</label>
						</div>
						<div class="input-wrap">
							<base-input
								v-model="betAmount"
								clearable
								:inputWrapperClass="'h-9'"
								type="number"
								:min="1"
								class="input-format text-center !mb-0" />
							<span class="mx-3 text-t-2">
								<!-- 公式符号1 -->
								<span class="">x</span>
								<!-- 固定百分比 -->
								<span class="mx-[2px]">50%</span>
								<!-- 公式符号2 -->
								<span class="">x</span>
							</span>
						</div>
					</div>

					<!-- 庄家优势标签 -->
					<div class="flex-1">
						<div class="label-wrap">
							<label class="text-t-2 text-center">{{ $t('agent.calculator.houseEdge') }}</label>
						</div>
						<div class="input-wrap">
							<!-- 庄家优势输入框 -->
							<base-input
								v-model="houseEdge"
								:disabled="gameType === 'sports'"
								clearable
								:inputWrapperClass="'h-9'"
								:min="0"
								class="input-format text-center !mb-0" />
							<!-- 公式符号3 -->
							<span class="text-t-2 mx-3 flex-1 text-center">x</span>
						</div>
					</div>

					<!-- 佣金率标签 -->
					<div class="flex-1">
						<div class="label-wrap">
							<label class="text-t-2 text-center">
								{{ $t('agent.calculator.commissionRate') }}
							</label>
						</div>
						<div class="input-wrap">
							<!-- 佣金率输入框 -->
							<base-input
								v-model="commissionRate"
								clearable
								:inputWrapperClass="'h-9'"
								:min="0"
								class="input-format text-center !mb-0" />

							<!-- 等号 -->
							<span class="text-t-2 mx-3 flex-1 text-center">=</span>
						</div>
					</div>

					<!-- 佣金收入标签 -->
					<div class="flex-1">
						<div class="label-wrap">
							<label class="text-t-2 text-center">{{ $t('agent.calculator.earnings') }}</label>
						</div>
						<div class="input-wrap">
							<!-- 佣金收入显示框 -->
							<div class="bg-bg-3 h-9 input-format rounded-lg p-2 text-t-2">
								{{ calculatedEarnings }}
							</div>
							<!-- <base-input
								v-model="calculatedEarnings"
								clearable
								:inputWrapperClass="'h-9'"
								:min="0"
								readonly
								placeholder=""
								class="input-format bg-bg-3 text-center !mb-0" /> -->
						</div>
					</div>
				</div>
			</div>

			<!-- 提示信息 -->
			<div class="mt-5 px-5 py-6 rounded-lg border-2 border-dotted border-border-2 text-t-3 flex">
				<base-icon name="about" class="flex-shrink-0 mr-2 mt-1" />
				<div>
					{{ tipRef }}
					<span>{{ $t('agent.tip.email.prefix') }}@{{ $t('agent.tip.email.domain') }}</span>
					{{ t('agent.tip.or') }}
					<span class="app-text-link text-primary" @click="customerService">
						{{ $t('agent.tip.service') }}
					</span>
					。
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { BasePopselect, BaseInput } from '@/components/base'
import { BaseIcon } from '@/components/base'
import { customerService } from '@/utils'
import { useI18n } from 'vue-i18n'

// 初始化数据
const gameType = ref('casino')
const gameTypeList = ref([
	{ text: '赌场', id: 'casino' },
	{ text: '体育', id: 'sports' }
])
const { t } = useI18n()

const tipRef = ref<string>(t('agent.tip'))
const betAmount = ref<number>(10000) // 默认值 10000
const houseEdge = ref<number>(3.5) // 默认值 3.5
const commissionRate = ref<number>(30) // 默认值 30

// 计算佣金收入
const calculatedEarnings = computed(() => {
	const bet = betAmount.value || 0
	const edge = houseEdge.value / 100 || 0
	const rate = commissionRate.value / 100 || 0
	return (bet * 0.5 * edge * rate).toFixed(2)
})

// 监听游戏类型变化
const onTypeChange = (v: string) => {
	console.log('gameType changed', v)
	gameType.value = v
	if (v === 'casino') {
		betAmount.value = 10000
		houseEdge.value = 3.5
		commissionRate.value = 30
	} else {
		betAmount.value = 10000
		houseEdge.value = 3
		commissionRate.value = 30
	}
}

// watch(
// 	() => gameType.value,
// 	(v: any) => {
// 		console.log('gameType changed', v)
// 		if (v === 'casino') {
// 			betAmount.value = 10000
// 			houseEdge.value = 3.5
// 			commissionRate.value = 30
// 		} else {
// 			betAmount.value = 10000
// 			houseEdge.value = 3
// 			commissionRate.value = 20
// 		}
// 	}
// )
</script>
<style scoped lang="scss">
.first {
	::after {
		content: 'x 50% x';
	}
}

.panel {
	border-radius: 8px;
	background: var(--bg-11-b-2538, #1b2538);
}

.label-wrap {
	margin-bottom: 5px;
}

.input-wrap ::v-deep(.n-input-number) {
	width: 270px;
}

.input-wrap ::v-deep(.n-input) {
	width: 270px;
}

.input-wrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;

	.opt {
		flex-grow: 1;
		text-align: center;

		.text-formula {
			color: #96a5aa;
		}
	}
}
.input-format {
	width: 100%;
}
@media (min-width: 1655px) {
	.input-format {
		width: 284px;
	}
}
@media (max-width: 765px) {
	.input-format {
		width: 213px;
	}
}
</style>
